<!--

    Copyright (c) 2010-2025 Eclipse Dirigible contributors

    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v2.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v20.html

    SPDX-FileCopyrightText: Eclipse Dirigible contributors
    SPDX-License-Identifier: EPL-2.0

-->
<div class="main-header">
    <bk-shellbar>
        <bk-shellbar-group position="left" style="flex:0">
            <span ng-if="!collapseMenu" bk-shellbar-logo><img ng-src="{{ ::branding.logo }}" alt="{{ ::branding.name }}" width="32" height="32"></span>
            <bk-popover ng-if="collapseMenu">
                <bk-popover-control>
                    <bk-button bk-shellbar-button glyph="sap-icon--menu2" aria-label="{{'common:aria.headerMainMenuBtn' | t:'main menu button'}}"></bk-button>
                </bk-popover-control>
                <bk-popover-body no-arrow="true" can-scroll="false">
                    <bk-menu aria-label="{{'common:aria.headerMenu' | t:'header menu'}}">
                        <bk-menu-sublist ng-repeat="menuItem in menus[perspectiveId].items track by $index" title="{{ menuItem.translation.key | t:menuItem.translation.options:menuItem.label }}" can-scroll="canMenuScroll(menuItem.items)">
                            <submenu sublist="menuItem.items" menu-handler="menuClick"></submenu>
                        </bk-menu-sublist>
                        <bk-menu-sublist ng-if="menus[perspectiveId].include.window" title="{{ systemMenus.window.translation.key | t:systemMenus.window.translation.options:systemMenus.window.label }}"
                            can-scroll="canMenuScroll(systemMenus.window.items)">
                            <submenu sublist="systemMenus.window.items" menu-handler="menuClick"></submenu>
                        </bk-menu-sublist>
                        <bk-menu-sublist ng-if="menus[perspectiveId].include.help" title="{{ systemMenus.help.translation.key | t:systemMenus.help.translation.options:systemMenus.help.label }}"
                            can-scroll="canMenuScroll(systemMenus.help.items)">
                            <submenu sublist="systemMenus.help.items" menu-handler="menuClick"></submenu>
                        </bk-menu-sublist>
                    </bk-menu>
                </bk-popover-body>
            </bk-popover>
            <span bk-shellbar-title>{{ ::branding.name }}</span>
            <div class="bk-hbox" ng-if="!collapseMenu">
                <bk-popover ng-repeat="menuItem in menus[perspectiveId].items track by $index">
                    <bk-popover-control>
                        <bk-button bk-shellbar-button label="{{ menuItem.translation.key | t:menuItem.translation.options:menuItem.label }}" is-menu="true"
                            aria-label="{{'common:aria.headerMenuBtn' | t:'menu button'}} {{ menuItem.translation.key | t:menuItem.translation.options:menuItem.label }}"></bk-button>
                    </bk-popover-control>
                    <bk-popover-body no-arrow="true" can-scroll="canMenuScroll(menus[perspectiveId].items)">
                        <bk-menu aria-label="{{'common:aria.headerMenu' | t:'header menu'}}">
                            <bk-menu-item ng-repeat-start="item in menuItem.items track by $index" ng-if="!item.items" title="{{ item.translation.key | t:item.translation.options:item.label }}" ng-click="menuClick(item)"
                                has-separator="item.separator"></bk-menu-item>
                            <bk-menu-sublist ng-if="item.items" has-separator="item.separator" title="{{ item.translation.key | t:item.translation.options:item.label }}" can-scroll="canMenuScroll(item.items)" ng-repeat-end>
                                <submenu sublist="item.items" menu-handler="menuClick"></submenu>
                            </bk-menu-sublist>
                        </bk-menu>
                    </bk-popover-body>
                </bk-popover>
                <bk-popover ng-show="menus[perspectiveId].include.window">
                    <bk-popover-control>
                        <bk-button bk-shellbar-button label="{{ systemMenus.window.translation.key | t:systemMenus.window.translation.options:systemMenus.window.label }}" is-menu="true" aria-label="{{'common:aria.windowMenuDdBtn' | t:'window menu dropdown button'}}"></bk-button>
                    </bk-popover-control>
                    <bk-popover-body no-arrow="true" can-scroll="canMenuScroll(systemMenus.window.items)">
                        <bk-menu aria-label="{{'common:aria.headerMenuWindow' | t:'header menu window'}}">
                            <bk-menu-item ng-repeat-start="item in systemMenus.window.items track by $index" ng-if="!item.items" title="{{ item.translation.key | t:item.translation.options:item.label }}" ng-click="menuClick(item)"
                                has-separator="item.separator">
                            </bk-menu-item>
                            <bk-menu-sublist ng-if="item.items" has-separator="item.separator" title="{{ item.translation.key | t:item.translation.options:item.label }}" can-scroll="canMenuScroll(item.items)" ng-repeat-end>
                                <submenu sublist="item.items" menu-handler="menuClick"></submenu>
                            </bk-menu-sublist>
                        </bk-menu>
                    </bk-popover-body>
                </bk-popover>
                <bk-popover ng-show="menus[perspectiveId].include.help || !menus[perspectiveId]">
                    <bk-popover-control>
                        <bk-button bk-shellbar-button label="{{ systemMenus.help.translation.key | t:systemMenus.help.translation.options:systemMenus.help.label }}" is-menu="true" aria-label="{{'common:aria.helpMenuDdBtn' | t:'help menu dropdown button'}}"></bk-button>
                    </bk-popover-control>
                    <bk-popover-body no-arrow="true" can-scroll="::canMenuScroll(systemMenus.help.items)">
                        <bk-menu aria-label="{{'common:aria.headerMenuHelp' | t:'header menu help'}}">
                            <bk-menu-item ng-repeat-start="item in systemMenus.help.items track by $index" ng-if="!item.items" title="{{ item.translation.key | t:item.translation.options:item.label }}" ng-click="::menuClick(item)"
                                has-separator="::item.separator">
                            </bk-menu-item>
                            <bk-menu-sublist ng-if="item.items" has-separator="::item.separator" title="{{ item.translation.key | t:item.translation.options:item.label }}" can-scroll="::canMenuScroll(item.items)" ng-repeat-end>
                                <submenu sublist="::item.items" menu-handler="::menuClick"></submenu>
                            </bk-menu-sublist>
                        </bk-menu>
                    </bk-popover-body>
                </bk-popover>
            </div>
        </bk-shellbar-group>
        <div style="flex:2;order:2;" id="spacer"></div>
        <bk-shellbar-group position="right" style="flex:0">
            <bk-shellbar-action>
                <bk-popover close-innerclick="false">
                    <bk-popover-control>
                        <bk-button bk-shellbar-button glyph="sap-icon--bell" badge="{{notifications.length ? notifications.length : ''}}" aria-label="{{'common:aria.ntfListButton' | t:'notification list button'}}" ng-click="notificationsPanelOpen()"></bk-button>
                    </bk-popover-control>
                    <bk-popover-body align="bottom-right" can-scroll="true" class="bk-vbox notification-popover">
                        <bk-toolbar has-title="true">
                            <bk-toolbar-title ng-if="notifications.length">{{ 'notificationsNum' | t:{ 'num': notifications.length} }}</bk-toolbar-title>
                            <bk-toolbar-spacer></bk-toolbar-spacer>
                            <bk-button state="transparent" label="{{'clearAll' | t:'Clear all'}}" ng-disabled="notifications.length === 0" ng-click="clearNotifications()"></bk-button>
                        </bk-toolbar>
                        <div ng-if="notifications.length" class="bk-vbox bk-box--gap bk-padding--tiny">
                            <bk-notification ng-repeat="notification in notifications track by notification.id" ng-click="notificationSelect(notification.id)" is-selected="selectedNotification === notification.id">
                                <div bk-notification-content>
                                    <div bk-notification-header>
                                        <span bk-notification-icon="{{notification.type}}"></span>
                                        <h4 bk-notification-title>{{notification.title}}</h4>
                                    </div>
                                    <p bk-notification-paragraph>{{notification.description}}</p>
                                    <div bk-notification-footer>
                                        <span bk-notification-footer-content>{{getLocalTime(notification.id)}}</span>
                                    </div>
                                </div>
                                <div bk-notification-actions>
                                    <bk-button aria-label="{{'common:aria.delNtf' | t:'delete notification'}}" state="transparent" glyph="sap-icon--delete" ng-click="deleteNotification(notification.id)"></bk-button>
                                </div>
                            </bk-notification>
                        </div>
                        <bk-message-page ng-if="!notifications.length" glyph="sap-icon--bell">
                            <bk-message-page-title>{{'noNotifications' | t:'No Notifications'}}</bk-message-page-title>
                        </bk-message-page>
                    </bk-popover-body>
                </bk-popover>
            </bk-shellbar-action>
            <bk-shellbar-action>
                <bk-popover>
                    <bk-popover-control>
                        <bk-avatar title="{{::username}}" glyph="sap-icon--account" shell="true" interactive="true" is-placeholder="true" aria-label="{{'common:aria.usrMenuBtn' | t:'user menu button'}}"></bk-avatar>
                    </bk-popover-control>
                    <bk-popover-body align="bottom-right" can-scroll="false">
                        <div class="bk-padding--tiny bk-vbox bk-box--gap bk-list-border--bottom">
                            <bk-form-label class="bk-font--small" colon="false">{{'username' | t:'Username'}}:</bk-form-label>
                            <p class="fd-text">{{::username}}</p>
                        </div>
                        <bk-menu class="bk-full-width" has-icons="true" aria-label="{{'common:aria.usrMenu' | t:'user menu'}}">
                            <bk-menu-item title="{{'logout' | t:'Logout'}}" left-icon-class="sap-icon--log" ng-click="logout()"></bk-menu-item>
                        </bk-menu>
                    </bk-popover-body>
                </bk-popover>
            </bk-shellbar-action>
        </bk-shellbar-group>
    </bk-shellbar>
</div>
